<template>
    <div>
        <div style="margin-top: 15px;">
            <Select filterable v-model="currentTeamId" placeholder="请选择队伍"  style="width: 180px;" @on-change='changeTeam'>
                <Option  v-for="item in userListData" :key="item.id" :value="item.id" :title="item.name">{{item.name}}</Option>
            </Select>
            <!-- <Button type="primary" class="md-add-jh" @click='saveModelBtn'>保存流程</Button> -->
            <Poptip
                transfer
                confirm
                title="确定要保存流程吗？"
                @on-ok="saveModelBtn">
                <Button type="primary" class="md-add-jh">保存流程</Button>
            </Poptip>
            <Button type="primary" @click='copyTask'>复制结构</Button>
            <Button type="primary" :disabled='isDis' @click='autoAdd' :loading='loadingBtn'>自动生成导调</Button>
            <Button type="primary" :disabled='clearBtnStatus' @click='clearAuto' :loading='loadingBtn2'>清空导调</Button>
            <Button type="primary"  @click='delTeamBtn' >清空队伍结构</Button>
        </div>
        <div style="display: flex;justify-content: space-between;">
            <div class="super-flow-base-demo">
                <super-flow
                    ref="superFlow"
                    :draggable='false'
                    :node-list="nodeList"
                    :linkAddable='false'
                    :link-list="linkList"
                    :origin="origin"
                    :graph-menu="graphMenuList"
                    :node-menu="nodeMenuList"
                    :link-menu="linkMenuList"
                    :enter-intercept="enterIntercept"
                    :output-intercept="outputIntercept"
                    @toJSON='toJSON'
                    :link-desc="linkDesc">
                    <template slot="node" slot-scope="{meta}">
                    <div :class="`flow-node flow-node-${meta.prop}`">
                        <header class="ellipsis">
                        {{ meta.name }}
                        <Checkbox v-if="meta.prop != 'end'" v-model="meta._check" @on-change='selectUpNode($event,meta)'></Checkbox>
                        </header>
                        <section class="ellipsis2" :title='meta.desc'>
                        {{ meta.desc }}
                        </section>
                    </div>
                    </template>
                </super-flow>
            </div>
            <div class="table-two-wrap">
                <Table border ref="selection" :columns="col" :data="taskList" style="width: 280px;margin: 8px;" 
                    @on-select='selectOne' @on-select-cancel='cancelOne'>
                </Table>
                <Table border ref="selection" :columns="col" :data="colTaskList" style="width: 272px;margin: 8px;" 
                    @on-select='selectOne' @on-select-cancel='cancelOne'>
                </Table>
            </div>
        </div>
        <!-- 复制任务给其他队伍 -->
        <Modal
            v-model="copyTaskModel" width="600"
            :mask-closable="false"
            :footer-hide="true" 
            title="复制任务">
            <Form ref="copyFormV" :model="copyFormV" :rules="copyFormVRule" :label-width="80">
                <FormItem label="队伍" prop="fromTeamId">
                    <Select filterable v-model="copyFormV.fromTeamId" placeholder="请选择队伍" filterable clearable>
                        <Option  v-for="item in copyTeamData" :key="item.id" :value="item.id" :title="item.name">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="copySubmitBtn('copyFormV')" :loading='colLoading2'>确定</Button>
                    <Button @click="resetBtn('copyFormV')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
        <!-- 删除队伍的任务结构 -->
        <Modal
            v-model="delTeamModel" width="600"
            :mask-closable="false"
            :footer-hide="true" 
            title="清空">
            <Form ref="delFormV" :model="delFormV" :rules="delFormVRule" :label-width="80">
                <FormItem label="队伍" prop="teamId">
                    <Select filterable v-model="delFormV.teamId" placeholder="请选择队伍" filterable>
                        <Option  v-for="item in userListData" :key="item.id" :value="item.id" :title="item.name">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem style="margin-top: 30px;">
                    <Poptip
                        transfer
                        confirm
                        title="确定要清空该队伍的任务结构吗？"
                        @on-ok="delTeamTask('delFormV')">
                        <Button type="error" :loading='delLoading'>清空</Button>
                    </Poptip>
                    <Button @click="resetBtn('delFormV')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>    
<script>
    const drawerType = {
        node: 0,
        link: 1
    }
    function GenNonDuplicateID(randomLength){  // 随机一个id
        return Number(Math.random().toString().substr(3,randomLength) + Date.now()).toString(36)
    }
    import axios from '@/libs/axios1'
    import {taskList,checkTaskList,branchTask,delBranchlTask,delBranchl,autoAddTask,clearAutoTask,copyTaskToTeam,addBranchlTaskByArr} from '@/api/train.js'
    export default {
        props:['hidebtn','isImport'],
        data(){
            return {
                sceneID:this.$route.query.id,
                testId:this.$route.query.testId,
                // 接入组
                userListData:[],
                copyTeamData:[],
                currentTeamId:'',
                // 绘制流程
                drawerType,
                drawerConf: {
                    title: '',
                    visible: false,
                    type: null,
                    info: null,
                    open: (type, info) => {
                        const conf = this.drawerConf
                        conf.visible = true
                        conf.type = type
                        conf.info = info
                        if (conf.type === drawerType.node) {
                            conf.title = '节点'
                            this.$set(this.nodeSetting, 'name', info.meta.name)
                            this.$set(this.nodeSetting, 'desc', info.meta.desc)
                        }
                    },
                    cancel: () => {
                        this.drawerConf.visible = false
                    }
                },
                nodeSetting: {
                    name: '',
                    desc: ''
                },
                origin: [800, 400],
                nodeList: [
                    {
                        'id': 'nodeS3WgFnzCI15X58Qw',
                        'width': 100,
                        'height': 80,
                        'coordinate': [-750, -50],
                        'meta': {
                            'prop': 'start',
                            'name': '开始节点',
                            _check:false,
                            'id': 'nodeS3WgFnzCI15X58Qw',
                            'coordinate': [-750, -50],
                        },
                    },
                ],
                linkList: [],
                graphMenuList: [],
                nodeMenuList: [],
                linkMenuList: [],
                startNodeInfo:{
                    'id': 'nodeS3WgFnzCI15X58Qw',
                    'width': 100,
                    'height': 80,
                    'coordinate': [-750, -50],
                    'meta': {
                        'prop': 'start',
                        'name': '开始节点',
                        _check:false,
                        'id': 'nodeS3WgFnzCI15X58Qw',
                        'coordinate': [-750, -50],
                    },
                },
                // 任务列表
                col:[
                    {
                        title:'选择任务',
                        type: 'selection',
                        key:'_checked',
                        align: 'center',
                        width:60,
                    },
                    {
                        title: '任务类型',
                        key: 'taskType',
                        width:90,
                        render: (h, params) => {
                            let text = ''
                            if(params.row.taskType == 'train'){
                                text = '训练'
                            }else if(params.row.taskType == 'check'){
                                text = '验证'
                            }else{
                                text = params.row.taskType
                            }
                            return h('div',text)
                        }
                    },
                    {
                        title: '任务名称',
                        key: 'name',
                        minWidth:120,
                    },
                ],
                taskData:[],
                taskList:[],
                colTaskList:[],
                // 全选 / 单选
                currentSelectTask:[],
                // 当前选中的上一步节点信息
                upNodeInfo:[],
                // 自动生成导调
                isImp:'',
                isDis:false,
                clearBtnStatus:false,
                loadingBtn:false,
                loadingBtn2:false,
                // 复制导调
                copyTaskModel:false,
                copyFormV:{
                    fromTeamId:'',
                },
                copyFormVRule:{
                    fromTeamId: [
                        { required: true, message: '请选择目标队伍', trigger: 'change' }
                    ],
                },
                colLoading2:false,
                // 删除队伍的任务结构
                delTeamModel:false,
                delFormV:{
                    teamId:'',
                },
                delFormVRule:{
                    teamId: [
                        { required: true, message: '请选择队伍', trigger: 'change' }
                    ],
                },
                delLoading:false,
            }
        },
        created () {
            let _this = this
            _this.nodeMenuList = [
                [
                    {
                        label: '删除',
                        disable: false,
                        selected (node, coordinate) {
                            if(node.meta.prop == 'start'){
                                _this.$Message.info('不可删除开始节点！')
                                return false
                            }
                            _this.removeNode(node)
                            node.remove()
                        }
                    }
                ]
            ]
        },
        mounted(){
            this.getUserGroupList()
            this.getTaskList()
            this.getColTaskList()
        },
        watch: {
            isImport(newVal) {
                this.isImp = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
            },
        },
        methods:{
            // 已分配任务的列表
            getBreachData(teamId){
                let _this = this
                let params = {
                    'trainingId':_this.sceneID,
                    'teamId':teamId,
                }
                _this.nodeList = []
                _this.linkList = []
                branchTask(params)
                .then(res=>{
                    _this.nodeList.push(_this.startNodeInfo)
                    if(res.data.code === 1){
                        let tasks = res.data.data.length > 0 ? res.data.data[0].tasks : []
                        if(tasks.length > 0){
                            _this.echoFlow(tasks)
                        }
                    }
                })
                .catch(err=>{
                    this.nodeList.push(this.startNodeInfo)
                    console.log(err)
                })
            },
            changeTeam(val){
                this.currentTeamId = val
                this.getBreachData(val)
            },
            // 获取接入组列表
            getUserGroupList(){
                let _this = this;
                axios({
                    url:'process/accessGroups?',
                    type:'get',
                    params:{
                        testId:_this.testId,
                        pageIndex:1,
                        pageSize:100,
                        order:"asc",
                        property:"name"
                    }
                }).then(function(response){
                    if(response.code==1){
                        _this.userListData = response.data.items;
                        _this.copyTeamData =  response.data.items;
                        if(response.data.items.length > 0){
                            _this.currentTeamId = response.data.items[0].id
                            _this.getBreachData(_this.currentTeamId)
                        }else{
                            _this.$Message.info({
                                content:'当前场景无接入组，请先创建接入组',
                                duration:3,
                            })
                        }
                    }else{
                        _this.userListData = [];
                        _this.copyTeamData = []
                    }
                })
            },
            // 流程图回显
            echoFlow(data){
                let _this = this
                let nodeList = []
                let linkList = []
                const taskObj = {}
                let endNode = {
                    'id': GenNonDuplicateID(20),
                    'width': 100,
                    'height': 80,
                    'coordinate': [50, -50],
                    'meta': {
                        'prop': 'end',
                        'name': '结束节点',
                        'taskType': '结束节点'
                    }
                }
                endNode.meta.id = endNode.id
                nodeList.push(this.startNodeInfo)
                nodeList.push(endNode)
                let index = 1
                data.forEach(el => {
                    let node = {
                        'id': el.id,
                        'width': 100,
                        'height': 80,
                        'coordinate': [],
                        'meta': {
                            'prop': 'approval',
                            'name': '流程节点',
                            _check:false,
                            'id': '',
                            'coordinate': [],
                            desc:el.name,
                            taskId:el.id,
                            taskType:el.taskType,
                            trainingId: el.trainingId,
                        },
                    }
                    node.meta.id = node.id
                    let nextNodeArr = el.nextTasks
                    if(el.isStartTask === 1){ // 第一列节点与开始节点连
                        let lineObjLink1 = {
                            'id': GenNonDuplicateID(20),
                            'startId': '',
                            'endId': '',
                            'startAt': [100, 40],
                            'endAt': [0, 25],
                            'meta': null
                        }
                        lineObjLink1.startId = this.startNodeInfo.id
                        lineObjLink1.endId = el.id
                        linkList.push(lineObjLink1)
                        let arr = this.startNodeInfo.meta.coordinate
                        node.coordinate = this.firstNode(index,arr) // 第一列节点的坐标
                        node.meta.coordinate = node.coordinate
                    }
                    if(nextNodeArr.length == 0){  // 最后一列节点与结束节点连
                        let lineObjLink2 = {
                            'id': GenNonDuplicateID(20),
                            'startId': '',
                            'endId': '',
                            'startAt': [100, 40],
                            'endAt': [0, 25],
                            'meta': null
                        }
                        lineObjLink2.startId = el.id
                        lineObjLink2.endId = endNode.id
                        linkList.push(lineObjLink2)
                    }
                    nodeList.push(node)
                    taskObj[el.id] = el
                    index+=1
                });
                const nodeObj = {}
                nodeList.forEach(item=>{
                    nodeObj[item.id] = item
                })
                // 再循环一次 添加中间节点的连线
                for(let i=0;i<data.length;i++){
                    let nextNodeArr = data[i].nextTasks
                    if(nextNodeArr.length > 0){  // 中间节点
                        for(let j=0;j<nextNodeArr.length;j++){
                            let lineObj3 = {
                                'id': GenNonDuplicateID(20),
                                'startId': data[i].id,
                                'endId': taskObj[nextNodeArr[j].taskId].id,
                                'startAt': [100, 40],
                                'endAt': [0, 25],
                                'meta': null
                            }
                            linkList.push(lineObj3)
                        }
                    }
                }
                let recursiveFunction = function(){
                    let getStr = function(list){
                        list.forEach(function(row){
                            let endId = row.endId
                            let startId = row.startId
                            let nodeInfo = nodeObj[endId]
                            let preNodeInfo = nodeObj[startId]
                            // 当前节点不能是开始或结束节点或第一列、前一节点要有坐标 ,并且自身无坐标
                            if(nodeInfo.meta.prop != 'end' && nodeInfo.meta.prop != 'start' && preNodeInfo.coordinate.length > 0 && preNodeInfo.id != 'nodeS3WgFnzCI15X58Qw' && nodeInfo.coordinate.length == 0){
                                let arr1 = taskObj[startId].nextTasks // 父节点中 子节点数组
                                let getIndex = arr1.findIndex(item => item.taskId == nodeInfo.id); // 当前节点在父节点数组中的位置
                                let coordinate = _this.firstNode(getIndex+1,preNodeInfo.coordinate) // 将获取的坐标
                                _this.addCoor(nodeList,nodeInfo.id,coordinate) // 将获取的坐标插入到节点列表中
                            }
                        })
                    }
                    getStr(linkList)
                }
                recursiveFunction()
                // 设置结束节点的坐标
                let coorArr = []
                nodeList.forEach(item=>{
                    if(item.meta.prop != 'end'){
                        coorArr.push(item.coordinate[0])
                    }
                })
                let newarr = new Set(coorArr)
                nodeList.forEach(item=>{
                    if(item.meta.prop == 'end'){
                        item.coordinate = [-750+(200*(newarr.size)), -50]
                        item.meta.coordinate = [-750+(200*(newarr.size)), -50]
                    }
                })
                this.nodeList = nodeList
                this.linkList = linkList
            },
            // 第一列节点
            firstNode(index,arr){
                if(index === 1){
                    return [arr[0]+200,arr[1]]
                }else{
                    let parity = (index%2) == 0 ?true:false  // 偶数  奇数
                    let rows = parseInt(index/2)  // 判断新加节点放第几层
                    return parity?[arr[0]+200,arr[1]-100*rows]:[arr[0]+200,arr[1]+100*rows]
                }
            },
            // 向流程节点中添加坐标
            addCoor(arr,id,coor){
                arr.forEach((item)=>{
                    if(item.id === id){
                        item.coordinate = coor
                        item.meta.coordinate = coor
                    }
                })
            },
            // 绘制流程
            enterIntercept (formNode, toNode, graph) {
                const formType = formNode.meta.prop
                switch (toNode.meta.prop) {
                    case 'start':
                    return false
                    case 'approval':
                    return [
                        'start',
                        'approval',
                        'condition',
                        'cc'
                    ].includes(formType)
                    case 'condition':
                    return [
                        'start',
                        'approval',
                        'condition',
                        'cc'
                    ].includes(formType)
                    case 'end':
                    return [
                        'approval',
                        'cc'
                    ].includes(formType)
                    default:
                    return true
                }
            },
            outputIntercept (node, graph) {
                return !(node.meta.prop === 'end')
            },
            linkDesc (link) {
                return link.meta ? link.meta.desc : ''
            },
            toJSON(data){
            
            },
            // 训练任务列表
            getTaskList(){
                let params = {
                    pageIndex:1,
                    pageSize:1000,
                    trainingId:this.sceneID,
                }
                taskList(params)
                .then(res=>{
                    if(res.data.code === 1){
                        let items = res.data.data.records
                        items.forEach(element => {
                            element._checked = false
                        });
                        let endNode = {
                            'id': 'nodeDhVU6w2KbEnJCjZs',
                            'width': 80,
                            'height': 50,
                            'coordinate': [0, 0],
                            'meta': {
                                'prop': 'end',
                                'name': '结束节点'
                            },
                            name:'结束节点',
                            taskType:'结束节点',
                            createTime:'null'
                        }
                        items.push(endNode)
                        this.taskList = items
                    }else{
                        this.taskList = []
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            // 验证任务列表
            getColTaskList(){
                let params = {
                    pageIndex:1,
                    pageSize:1000,
                    trainingId:this.sceneID,
                }
                checkTaskList(params)
                .then(res=>{
                    if(res.data.code === 1){
                        let items = res.data.data.records
                        items.forEach(element => {
                            element._checked = false
                        });
                        this.colTaskList = items
                    }else{
                        this.colTaskList = []
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            // 勾选前一节点
            selectUpNode(e,meta){
                for(let i=0;i<this.nodeList.length;i++){
                    if(meta.id == this.nodeList[i].id){
                        this.nodeList[i].meta._check = e
                    }
                }
                let index = this.upNodeInfo.findIndex(item => item.id == meta.id);
                if(e && index < 0){
                    this.upNodeInfo.push(meta)
                }else if(!e && index >= 0){
                    this.upNodeInfo.splice(index,1);
                }
            },
            // 单选 取消
            selectOne(selection,row){
                let arr = []
                if(row.taskType == 'train' || row == '结束节点'){
                    arr = this.taskList
                }else if(row.taskType == 'check'){
                    arr = this.colTaskList
                }
                this.setSelected(arr,row.id,true)
                this.addTaskToProcess(row)
            },
            cancelOne(selection,row){
                let index = this.nodeList.findIndex(item => item.id == row.id);
                if(index >= 0){
                    this.nodeList.splice(index,1);
                    for(var i=this.linkList.length-1;i>=0;i--){
                        if(this.linkList[i].endId == row.id){
                            this.linkList.splice(i,1)
                        }
                    }
                }
            },
            // 将任务添加到流程图
            addTaskToProcess(row){
                if(this.upNodeInfo.length == 0){
                    this.$Message.info({
                        content:'请先勾选父节点',
                        duration:3,
                    })
                    return false
                }
                let zeroNodeCoor = this.upNodeInfo[0].coordinate
                let zeroNodeId = this.upNodeInfo[0].id
                let nodeObj = {   // 如果勾选多个父节点，则新节点的位置以第一个父节点位置为准
                    'id': GenNonDuplicateID(20),
                    'width': 100,
                    'height': 80,
                    // 'coordinate': [-550, -50],
                    'coordinate': this.setCoordinate(zeroNodeCoor,zeroNodeId),
                    'meta': {
                        'prop': 'approval',
                        'name': '流程节点',
                        desc:row.name,
                        taskId:row.id,
                        taskType:row.taskType,
                        trainingId: row.trainingId,
                    }
                }
                nodeObj.meta.id = nodeObj.id
                nodeObj.meta.coordinate = nodeObj.coordinate
                if(row.taskType == '结束节点'){
                    nodeObj.meta.prop = 'end'
                    nodeObj.meta.name = '结束节点'
                    nodeObj.meta.taskType = '结束节点'
                }
                this.nodeList.push(nodeObj)
                for(let i=0;i<this.upNodeInfo.length;i++){
                    let startNodeId = this.upNodeInfo[i].id
                    let lineObj = {
                        'id': GenNonDuplicateID(20),
                        'startId': startNodeId,
                        'endId': nodeObj.id,
                        'startAt': [100, 40],
                        'endAt': [0, 25],
                        'meta': null
                    }
                    this.linkList.push(lineObj)
                }
            },
            // 计算新加节点的位置
            setCoordinate(arr,startId){
                let getLinkNum = this.linkList.filter(item=>{return item.startId == startId}).length
                if(getLinkNum == 0){
                    return [arr[0]+200,arr[1]]
                }else{
                    let parity = (getLinkNum%2) == 0 ?true:false  // 偶数  奇数
                    let rows = parseInt((getLinkNum+1)/2)  // 判断新加节点放第几层
                    return parity?[arr[0]+200,arr[1]+100*rows]:[arr[0]+200,arr[1]-100*rows]
                }
            },
            // 删除节点时同时从数组中移除
            removeNode(node){
                let index = this.nodeList.findIndex(item => item.id == node.id);
                this.nodeList.splice(index,1);
                // 改变数组中的选中状态
                let arr = []
                if(node.meta.taskType == 'train' || node.meta == '结束节点'){
                    arr = this.taskList
                }else if(node.taskType == 'check'){
                    arr = this.colTaskList
                }
                this.setSelected(arr,node.meta.taskId,false)
            },
            // 勾选或取消 设置check
            setSelected(arr,id,bool){
                arr.forEach(element => {
                    if(element.id == id){
                        element._checked = bool
                    }
                });
            },
            delTeamBtn(){
                this.delFormV.teamId = this.currentTeamId
                this.delTeamModel = true
            },
            delTeamTask(name){
                let id = this.delFormV.teamId
                this.$refs[name].validate((valid) =>{
                    if(valid){
                        let params = {
                            trainingId:this.sceneID,
                            teamId:id,
                        }
                        this.delLoading = true
                        delBranchlTask(params)
                        .then(res=>{
                            if(res.data.code === 1){
                                this.copyTaskModel = false
                                this.$Message.success({
                                    content:'清空成功',
                                    duration:3,
                                })
                                this.delTeamModel = false
                                this.getBreachData(id)
                            }else{
                                this.$Message.error({
                                    content:res.data.message,
                                    duration:3,
                                })
                            }
                            this.delLoading = false
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                    }else {
                        this.$Message.error('请完善信息！');
                    }
                })
            },
            // 自动生成导调
            autoAdd(){
                this.loadingBtn = true
                autoAddTask(this.sceneID)
                .then(res=>{
                    if(res.data.code === 1){
                        // this.isDis = true
                        // this.clearBtnStatus = false
                        this.$Message.success({content:'自动生成并导入导调成功',duration:3})
                    }else{
                        this.$Message.error({content:res.data.message,duration:5})
                    }
                    this.loadingBtn = false
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            // 清空导调
            clearAuto(){
                this.loadingBtn2 = true
                clearAutoTask(this.sceneID)
                .then(res=>{
                    if(res.data.code === 1){
                        // this.isDis = false
                        // this.clearBtnStatus = true
                        this.$Message.success({content:'导调清除成功',duration:3})
                    }else{
                        this.$Message.error({content:res.data.message,duration:5})
                    }
                    this.loadingBtn2 = false
                })
                .catch(err=>{
                    this.loadingBtn2 = false
                    console.log(err)
                })
            },
            // 复制步骤给其他队伍
            copyTask(){
                this.copyTeamData =  this.userListData.filter((item)=>{
                    return this.currentTeamId != item.id
                })
                this.copyFormV.fromTeamId = ''
                this.copyTaskModel = true
            },
            copySubmitBtn(name){ // 先清空 再复制
                this.$refs[name].validate((valid) =>{
                    if(valid){
                        let params = {
                            toTeamId:this.copyFormV.fromTeamId,
                            fromTeamId:this.currentTeamId,
                            trainingId: this.sceneID,
                        }
                        let params2 = {
                            trainingId:this.sceneID,
                            teamId:this.copyFormV.fromTeamId,
                        }
                        delBranchlTask(params2)
                        .then(res=>{
                            if(res.data.code === 1){
                                this.copySub(params)
                            }else{
                                this.$Message.error({
                                    content:res.data.message,
                                    duration:3,
                                })
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                    }else {
                        this.$Message.error('请完善信息！');
                    }
                })
            },
            copySub(params){
                this.colLoading2 = true
                copyTaskToTeam(params)
                .then(res=>{
                    if(res.data.code === 1){
                        this.copyTaskModel = false
                        this.$Message.success({
                            content:'复制成功',
                            duration:3,
                        })
                    }else{
                        this.$Message.error({
                            content:res.data.message,
                            duration:3,
                        })
                    }
                    this.colLoading2 = false
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            // 保存流程图
            saveModelBtn(){
                this.save(this.currentTeamId)
            },
            save(teamId){
                let _this = this
                let nodeList = _this.nodeList
                let linkList = _this.linkList
                const Dict = {}
                nodeList.forEach(element => {
                    Dict[element.id] = element
                });
                let dataList = []
                nodeList.forEach(element => {
                    if(element.meta.prop == 'approval'){ // 流程节点
                        let obj = {
                            "nextTaskList":[],
                            "taskId": element.meta.taskId,
                            "taskName": element.meta.desc,
                            "taskType": element.meta.taskType,
                            "teamId": teamId,
                            "trainingId": element.meta.trainingId,
                        }
                        linkList.forEach(item => {
                            if(item.startId === element.id){
                                let obj2= {}
                                let nextNodeId = item.endId
                                if(Dict[nextNodeId] && Dict[nextNodeId].meta.prop === 'approval'){
                                    obj2.taskId = Dict[nextNodeId].meta.taskId
                                    obj2.taskType = Dict[nextNodeId].meta.taskType
                                    obj.nextTaskList.push(obj2)
                                }
                            }
                            if(item.endId === element.id){
                                let preNodeId = item.startId
                                if(Dict[preNodeId] && Dict[preNodeId].meta.prop === 'start'){
                                    obj.isStartTask = 1
                                }
                            }
                        })
                        dataList.push(obj)
                    }
                });
                this.submit(dataList)
            },
            submit(data){
                addBranchlTaskByArr(data)
                .then(res=>{
                    if(res.data.code === 1){
                        this.$Message.success({
                            content:'保存成功',
                            duration:3,
                        })
                    }else{
                        this.$Message.error({
                            content:res.data.message,
                            duration:5,
                        })
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
            }
        }
    };
</script>
<style>
    .branchTask .ivu-checkbox-group{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }
    .ellipsis {
        white-space   : nowrap;
        text-overflow : ellipsis;
        overflow      : hidden;
        word-wrap     : break-word;
    }
    .super-flow-base-demo {
        width            : calc(100% - 600px);
        height           : 680px;
        margin           : 0 auto;
        background-color : #f5f5f5;
        overflow         : scroll;
    }
    .super-flow-base-demo .super-flow {
        width  : 5000px;
        height : 1000px;
    }
    .super-flow__node .flow-node header{
        font-size   : 14px;
        height      : 32px;
        line-height : 32px;
        padding     : 0 12px;
        color       : #ffffff;
    }
    .super-flow__node .flow-node section{
        text-align  : center;
        line-height : 20px;
        overflow    : hidden;
        padding     : 6px 12px;
        word-break  : break-all;
        height: 48px;
        text-overflow: ellipsis;
        display:'-webkit-box';
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }
    .flow-node-start header{
        background-color : #55abfc;
    }
    .flow-node-condition header{
        background-color : #BC1D16;
    }
    .flow-node-approval header{
        background-color :  rgba(188, 181, 58, 0.76);
    }
    .flow-node-cc header{
        background-color : #30b95c;
    }
    .flow-node-end header{
        height           : 50px;
        line-height      : 50px;
        background-color : rgb(0, 0, 0);
    }
    .table-two-wrap{
        margin-left: 20px;
        width: 580px;
        max-height: 680px;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        justify-content: space-between;
    }
    .table-two-wrap .ivu-table-header .ivu-checkbox{
        display: none;
    }
</style>